<script setup lang="ts">
import MARKER_ICON from '../assets/marker-icon.png'
import { ref, reactive } from 'vue'
import type { Ref } from 'vue'
import type {
    VcCamera,
    VcPosition,
    VcReadyObject,
    VcRectangle,
} from "vue-cesium/es/utils/types";
import type {
    VcGraphicsLabelProps,
    VcImageryProviderArcgisRef,
    VcTerrainProviderCesiumRef,
} from "vue-cesium/es";

const alpha: Ref<number> = ref(100.0)
const brightness: Ref<number> = ref(100.0)
const contrast: Ref<number> = ref(100.0)
const imageryProvider: Ref<VcImageryProviderArcgisRef | null>  = ref(null)
const terrainProvider: Ref<VcTerrainProviderCesiumRef | null> = ref(null)
const enableMapTerrain: Ref<boolean> = ref(true)
const enableImageryAnnotationLayer: Ref<boolean> = ref(true)
const mapRectangle: VcRectangle = reactive<Array<number>>([
    /* 青岛市左下角：经度，纬度 */
    120.00, 36.00,
    /* 青岛市右上角：经度，纬度 */
    120.75, 36.50
])
const defaultCamera: VcCamera = reactive<VcCamera>({
    position: [120.375, 36.250, 80 * 1000],
    //retangle: mapRectangle, // FIXME: "retangle"应为rectangle。对应的 bug issue 已提交至 https://github.com/zouyaoji/vue-cesium/issues/291
    //rectangle: mapRectangle,
    heading: 0,
    pitch: -90,
    roll: 0,
})

const onViewerReady: any = ({ Cesium, viewer }: VcReadyObject) => {
    Cesium.Camera.DEFAULT_VIEW_FACTOR = 0.0
    Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
        /* 青岛市左下角：经度，纬度 */
        120.00, 36.00,
        /* 青岛市右上角：经度，纬度 */
        120.75, 36.50
    )
    viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(120.375, 36.250, 100*1000),
        orientation: {
            heading : Cesium.Math.toRadians(0),
            pitch : Cesium.Math.toRadians(-90),
            roll : Cesium.Math.toRadians(0)
        },
    })
    viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY)
    // OpenStreetMap建筑白模
    const buildingColor: any = Cesium.Color.CYAN.withAlpha(0.875);
    viewer.scene.primitives.add(Cesium.createOsmBuildings({defaultColor: buildingColor}))
}

const model = ref(null)

const position: VcPosition = {
    lng: 120.4243,
    lat: 36.0734,
    height: 45
}
const label: VcGraphicsLabelProps = {
    text: '中电科22所停车场',
    pixelOffset: [0, -45]
}
const distanceDisplayCondition = { near: 0, far: 20000000 }
const horizontalOrigin = 0
const scale = ref(1)
const show = ref(true)
const billboard = ref(null)
// methods
const onEntityEvt: any = (e: any) => {
    if (e.type === 'onmouseover') {
        scale.value = 1.25
    } else if (e.type === 'onmouseout') {
        scale.value = 1
    }
}
</script>

<template>
    <div id="demo_map">
        <vc-viewer @ready="onViewerReady" :homeButton="true">
            <!-- 状态条没有适配手机小屏幕，暂不开启
            <vc-status-bar position="bottom-right" :offset="[120, 3]" :show-performance-info="false">
            </vc-status-bar>
            -->
            <vc-zoom-control position="left" direction="vertical" :offset="[24, 0]" :default-reset-view="defaultCamera">
            </vc-zoom-control>
            <vc-entity
                :name="label.text"
                description="中国电波传播研究所（青大一路19号）"
                :position="position"
                :label="label"
                :scale="scale"
                :show="show"
                @click="onEntityEvt"
                @mouseover="onEntityEvt"
                @mouseout="onEntityEvt">
                <vc-graphics-billboard
                    ref="billboard"
                    :name="label.text"
                    :image="MARKER_ICON"
                    :scale="scale"
                    :show="show"
                    :distance-display-condition="distanceDisplayCondition"
                    :horizontal-origin="horizontalOrigin"
                ></vc-graphics-billboard>
            </vc-entity>
            <vc-layer-imagery
                :rectangle="mapRectangle"
                :alpha="alpha/100.0"
                :brightness="brightness/100.0"
                :contrast="contrast/100.0"
                :sort-order="10">
                <vc-imagery-provider-arcgis ref="imageryProvider"></vc-imagery-provider-arcgis>
            </vc-layer-imagery>
            <div v-if="enableMapTerrain">
                <vc-terrain-provider-cesium ref="terrainProvider"></vc-terrain-provider-cesium>
            </div>
            <div v-if="enableImageryAnnotationLayer">
                <vc-layer-imagery
                    :rectangle="mapRectangle">
                    <!--影像注记图层：天地图cia_w -->
                    <!--cia 代表 Chinese-Imagery-Annotation -->
                    <!--w 代表投影坐标系为 WebMercator -->
                    <vc-imagery-provider-tianditu
                        mapStyle="cia_w"
                        maximum-level="19"
                        token="e7894a985fe457b58ef9c65beae0619a">
                    </vc-imagery-provider-tianditu>
                </vc-layer-imagery>
            </div>
        </vc-viewer>
        <div class="my-toolbar">
            <div v-if="false">
                <el-row>
                    <span class="my-label">不透明度</span>
                    <el-slider class="my-slider" v-model="alpha" :min="0" :max="100" :step="1" show-input size="default"></el-slider>
                </el-row>
                <el-row>
                    <span class="my-label">亮度</span>
                    <el-slider class="my-slider" v-model="brightness" :min="0" :max="200" :step="1" show-input size="default"></el-slider>
                </el-row>
                <el-row>
                    <span class="my-label">对比度</span>
                    <el-slider class="my-slider" v-model="contrast" :min="0" :max="200" :step="1" show-input size="default"  ></el-slider>
                </el-row>
            </div>
            <el-row>
                <el-switch v-model="enableMapTerrain"></el-switch>
                <span class="my-label-right-side">地形渲染</span>
            </el-row>
            <el-row>
                <el-switch v-model="enableImageryAnnotationLayer"></el-switch>
                <span class="my-label-right-side">叠加路网注记图层</span>
            </el-row>
        </div>
    </div>
</template>

<style scoped>
#demo_map {
    color: gold;
    width: 100%;
    /*height: 500px;*/
    height: 100%;
}
.my-toolbar {
    position: fixed;
    left: 5px;
    top: 40px;
    margin: 10px;
    padding: 15px;
    background-color: rgba(15, 15, 15, 0.625);
    box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.125);
    text-align: right;
}
.my-label {
    display: flex;
    align-items: center;
    justify-content: right;
    width: 80px;
    padding: 0 12px 0 0;
}
.my-label-right-side {
    display: flex;
    align-items: center;
    justify-content: right;
    padding: 0 5px 0 5px;

}
.my-slider {
    display: flex;
    align-items: center;
    width: 350px;
    padding: 20px 0;
}
</style>